@import '~@/styles/theme.less';

.monitor-modal{
    .ant-modal-header {
        padding: 12px 32px;
        font-size:16px;
        font-weight:400;
        color:rgba(23,30,45,0.85);
        background:rgba(248,248,248,1);
        border-bottom: none;
        border-radius: 2px 2px 0 0;
    }
    .ant-modal-title {
        font-size:16px;
        font-weight:500;
        color:rgba(23,30,45,1);
        line-height: 24px;
    }
    .ant-modal-close {
        color: #BDBDBD;
        right: 32px;
    }
    .ant-modal-close-x {
        display: block;
        width: auto;
        height: 48px;
        font-size: 12px;
        line-height: 48px;
    }
    .ant-modal-content {
        border-radius: 2px;
        box-shadow: none;
    }
    .ant-modal-body {
        padding:24px 32px;
       
    }
    .triangle{
        width: 7px;
        height: 7px;
        border-top: 1.4px solid @hoverColor;
        border-right: 1.4px solid @hoverColor;
        transform: rotate(45deg);
    }
    .current-peer-info{
        display: flex;
        margin-bottom: 24px;
        align-items: center;
        justify-content: space-between;
        line-height:22px;
        font-weight:400;
        .peer-name{
            color:rgba(23,30,45,0.85);
        }
        .monitor{
            display: flex;
            align-items: center;
            .action{
                display: flex;
                cursor: pointer;
                align-items: center;
                font-weight:400;
                color:@hoverColor;
                &:first-of-type{
                    margin-right: 24px;
                }
            }
           
        }
    }
    .time{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        justify-content: space-between;
        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child {
            border-color: @primary-color;
        }
        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
            color: @primary-color;
            border-color: @primary-color;
        }
        .ant-radio-button-wrapper:first-child {
            border-left-color: #D9DDE0;
        }
        .ant-radio-button-wrapper {
            height: 32px;
            margin: 0;
            padding: 0 16px;
            font-weight: 400;;
            font-family:PingFangSC-Regular,PingFang SC;
            color:rgba(23,30,45,0.85);
            text-align: center;
            border-color: #D9DDE0;

            
        }
        .lidu{
            height:32px;
            font-size:12px;
            font-weight:400;
            color:rgba(23,30,45,0.45);
            line-height:32px;
        }
      
    }
    .charts{
        .ant-tabs{
            font-size:12px;
            font-weight:400;
            color:rgba(23,30,45,0.65);
        }
        .ant-tabs-bar {
            margin: 0 0 8px 0;
            border-bottom: 1px solid #E9E9E9;
            outline: none;
            padding:0 38px;
            -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            -o-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        .echarts{
            margin-top: 16px;
            background:rgba(248,248,248,1);
            padding: 24px 24px 32px 24px;
            font-weight:400;
            line-height: 22px;
            display: flex;
            .echarts-name{
                width: 80px;
                color:rgba(23,30,45,0.45);
            }
            .description-name{
                width: 100px;
                margin-right: 32px;
                color:rgba(23,30,45,1);
            
            }
            .small-text{
                font-size:12px;
                color:rgba(23,30,45,0.25);
                line-height:20px;
            }
            
        }
    }
    

}
.date-modal{
    .ant-modal-body {
        padding:21px;
       
    }
    .ant-modal-content {
        box-shadow:0px 3px 12px 0px rgba(0,0,0,0.16);
        border-radius:4px;
    }
}
.time-modal{
    .ant-picker {
        color: #171E2D;
        font-size: 12px;
        font-weight: 400;
        padding: 5px 16px 5px;
        border: 1px solid #D9DDE0;
        border-radius: 4px;
    }
    .ant-picker-separator {
        color: #BFBFBF;
    }
    .ant-picker-input > input {
        font-weight: 400;
        color: #171E2D;
        
    }
    input::-webkit-input-placeholder{
        color:rgba(23,30,45,0.25);
        font-size: 12px;
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
        color:rgba(23,30,45,0.25);
        font-size: 12px;
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
        color:rgba(23,30,45,0.25);
        font-size: 12px;
    }
    .ant-picker-focused {
        border-color: @primary-color !important;
        box-shadow: none;
    }
    .ant-picker-range .ant-picker-active-bar {
        background: @primary-color;
    }
    .ant-btn-primary {
        color: #fff;
        background-color: @primary-color;
        border-color: @primary-color;
        box-shadow: none;
    }
    .ant-btn-sm {
        padding: 0px 12px;
        font-size:12px;
        font-weight:400;
    }
    .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
        border: 1px solid @primary-color;
        border-radius: 2px;
    }
    .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner, .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner, .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
        background: @primary-color;
    }
    .ant-picker-range .ant-picker-clear {
        right: 16px;
    }
   
    .btns{
        margin-top: 12px;
        display: flex;
        justify-content: flex-end;
    }
}
.ant-picker-footer-extra:not(:last-child) {
    border-bottom: none;
}
.ant-picker-footer-extra {
    padding: 4px 12px;
    text-align: left;
    float: left;
    line-height: 34px;
    span{
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:@primary-color;
        cursor: pointer;
    }
}
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover {
    background: rgba(0,0,0,0.04);
}
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
    background: #E9F5FF;
}
.ant-btn-primary-disabled, .ant-btn-primary.disabled, .ant-btn-primary[disabled], .ant-btn-primary-disabled:hover, .ant-btn-primary.disabled:hover, .ant-btn-primary[disabled]:hover, .ant-btn-primary-disabled:focus, .ant-btn-primary.disabled:focus, .ant-btn-primary[disabled]:focus, .ant-btn-primary-disabled:active, .ant-btn-primary.disabled:active, .ant-btn-primary[disabled]:active, .ant-btn-primary-disabled.active, .ant-btn-primary.disabled.active, .ant-btn-primary[disabled].active {
    border-color: #D9DDE0;
   
}
